import React from "react";
import './TodoMain.css';
import Swal from 'sweetalert2';

export default function TodoMain({todos, checkTodo, removeTodo}) {
  return (
    <ul className="todo-main">
      {
        todos.map(item => {
          return <li key={item.id}>
                <label>
                  <input type="checkbox" checked={item.done} onChange={(e) => {
                    // console.log(e.target.checked);
                    //调用函数, 更新任务的状态
                    checkTodo(item.id, e.target.checked);
                  }} />
                  <span className={item.done ? "done" : null}>{item.title}</span>
                </label>
                <button className="btn btn-danger" onClick={() => {
                  //添加确认框
                  Swal.fire({
                    title: '',
                    text: '你确定要删除该任务么?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                  }).then((result) => {
                    if (result.isConfirmed) {
                      //删除任务
                      removeTodo(item.id);
                      Swal.fire(
                        '删除成功',
                        '',
                        'success'
                      )
                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                      Swal.fire(
                        '取消删除',
                        '',
                        'success'
                      )
                    }
                  });
                  
                }}>删除</button>
              </li>
        })
      }
      {todos.length === 0 && <li style={{textAlign: 'center', padding: '20px 0'}}>暂无数据</li>}
    </ul>
  );
}
